<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>班级添加</title>
    <link rel="stylesheet" href="../css/layui.css">
    <link rel="stylesheet" href="/scriptZIP/layui.min.css">
    <link rel="stylesheet" href="../css/item.css">
    <link rel="stylesheet" href="../css/radio.css">
    <link rel="stylesheet" href="/scriptZIP/vue-select.min.css">
    <style>
        .layui-row {
            margin-top: 50px;
        }

        .offer {
            width: 90px;
            height: 35px;
            background: #0086b6;
            color: white;
            text-align: center;
            line-height: 35px;
            font-size: 16px;
            border-radius: 4px;
        }

        .return {
            width: 80px;
            height: 35px;
            background: #0086b6;
            color: white;
            text-align: center;
            line-height: 35px;
            margin-top: -35px;
            margin-left: 130px;
            font-size: 16px;
            border-radius: 4px;
        }

        .layui-form input[type=checkbox],
        .layui-form input[type=radio],
        .layui-form select {
            display: inline-block !important;
        }
    </style>
</head>

<body>
    <div class="layui-form">
        <div class="layui-row" id="vue-root">
            <div class="layui-col-md6 layui-col-md-offset3">
                <div class="layui-form-item">
                    <label class="layui-form-label required">班级名称</label>
                    <div class="layui-input-block">
                        <input name="classesName" v-validate="'required'" autocomplete="off" placeholder="请输入班级名称"
                            class="layui-input classname" v-model="item.name" data-vv-as="班级名称">
                        <div class="checkout_state" v-text="err('classesName')"></div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">班主任</label>
                    <div class="layui-input-block">
                        <select name="teacherName" data-vv-as="班主任" class="input_select classteacher "
                            v-model="item.teacherId">
                            <option :value="undefined" disabled="disabled">请选择老师</option>
                            <option v-for="teacher in teachers" :key="teacher.id" :value="teacher.id"
                                v-text="teacher.name">
                            </option>
                        </select>
                        <div class="checkout_state" v-text="err('teacherName')"></div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label required">授课老师</label>
                    <div class="layui-input-block">
                        <v-select multiple placeholder="请选择授课老师" label="name" :options="teachers" :reduce="item=>item.id"
                            v-model="item.personCharge"></v-select>
                        <div class="checkout_state" v-text="err('casea')"></div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label required">代课老师</label>
                    <div class="layui-input-block">
                        <v-select multiple placeholder="请选择代课老师" label="name" :options="teachers" :reduce="item=>item.id"
                            v-model="item.substituteTeacher"></v-select>
                        <div class="checkout_state" v-text="err('casea')"></div>
                    </div>
                </div>
               

                <!-- <div class="layui-form-item">
                    <label class="layui-form-label">代课老师</label>
                    <div class="layui-input-block">
                        <select name="teacherName" data-vv-as="班主任" class="input_select classteacher "
                            v-model="item.substituteTeacher">
                            <option :value="undefined" disabled="disabled">请选择老师</option>
                            <option v-for="teacher in teachers" :key="teacher.id" :value="teacher.id"
                                v-text="teacher.name">
                            </option>
                        </select>
                        <div class="checkout_state" v-text="err('teacherName')"></div>
                    </div>
                </div> -->


                <div class="layui-form-item">
                    <label class="layui-form-label">关联课程</label>
                    <div class="layui-input-block">
                        <select name="courseName" data-vv-as="关联课程" class="input_select classteacher "
                            v-model="item.related">
                            <option :value="undefined" disabled="disabled">请选择课程</option>
                            <option v-for="course in courses" :key="course.id" :value="course.id" v-text="course.name">
                            </option>
                        </select>
                        <div class="checkout_state" v-text="err('courseName')"></div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label required">班级容量</label>
                    <div class="layui-input-block">
                        <input name="classCapacity" v-validate="'required'" autocomplete="off" data-vv-as="班级容量" placeholder="请输入班级容量"
                            class="layui-input classCapacity" v-model="item.classCapacity">
                        <div class="checkout_state" v-text="err('classCapacity')"></div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">授课课时</label>
                    <div class="layui-input-block">
                        <input name="teachingHours" autocomplete="off" type="number" placeholder="请输入授课课时，单位：分钟"
                            class="layui-input name" v-model="item.teachingHours">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">扣减课时</label>
                    <div class="layui-input-block">
                        <input name="deductionHours" autocomplete="off" type="number" placeholder="请输入扣减课时，单位：分钟"
                            class="layui-input name" v-model="item.deductionHours">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">约课限制</label>
                    <div class="layui-input-block">
                        <input name="studentLimit" autocomplete="off" type="number" placeholder="最少开课人数"
                            class="layui-input name" v-model="item.studentLimit">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">上课教室</label>
                    <div class="layui-input-block">
                        <select class="input_select classteacher " v-model="item.classroom">
                            <option :value="undefined" disabled="disabled">所在教室</option>
                            <option v-for="room in rooms" :key="room.id" :value="room.id" v-text="room.name">
                            </option>
                        </select>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">所在年级</label>
                    <div class="layui-input-block">
                        <select name="gradeName" data-vv-as="所在年级" class="input_select classteacher "
                            v-model="item.gradeId">
                            <option :value="undefined" disabled="disabled">请选择所在年级</option>
                            <option v-for="grade in grades" :key="grade.id" :value="grade.id" v-text="grade.name">
                            </option>
                        </select>
                        <div class="checkout_state" v-text="err('gradeName')"></div>
                    </div>
                </div>


                <div class="layui-form-item">
                    <label class="layui-form-label">请假扣课时</label>
                    <div class="layui-input-block" style="padding-top: 13px;line-height: 15px;">
                        <input type="radio" name="sex" :value="1" title="扣" checked="checked" v-model="item.deduction">
                        <span>扣</span>
                        <input type="radio" name="sex" :value="2" title="不扣" style="margin-left: 20px;"
                            v-model="item.deduction">
                        <span>不扣</span>
                        <input type="radio" name="sex" :value="3" title="部分免扣" style="margin-left: 20px;"
                            v-model="item.deduction">
                        <span>部分免扣</span>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">未到扣课时</label>
                    <div class="layui-input-block" style="padding-top: 13px;line-height: 15px;">
                        <input name="checkbox" type="checkbox" class="checkbox" v-model="item.notDeducted" />
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">支持在线选班</label>
                    <div class="layui-input-block" style="padding-top: 13px;line-height: 15px;">
                        <input name="checkbox" type="checkbox" class="checkbox" v-model="item.classSelection" />
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">说明</label>
                    <div class="layui-input-block">
                        <textarea name="illustration" placeholder="请输入说明" class="layui-textarea text"
                            v-model="item.illustration"></textarea>
                        <div class="checkout_state"></div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <div class="offer" @click="submit">立即提交</div>
                        <div class="return" onclick="history.back()">取消</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- <script src="https://cdn.staticfile.net/layui/2.8.6/layui.js"></script> -->
    <script src="/scriptZIP/qs.min.js"></script>
    <script src="/scriptZIP/vue.min.js"></script>
    <script src="/scriptZIP/vue-select.min.js"></script>

    <script src="/scriptZIP/axios.min.js"></script>

    <script src="/js/common.js"></script>
    <script src="/js/item.js"></script>


    <script>
        var agentId = localStorage.getItem('agentId')
        Vue.component('v-select', VueSelect.VueSelect);
        var app = new Vue(merge({
            data: {
                item: {
                    schoolId: top_params().id,
                    // teacherId: null,
                    // classroom: 1,
                    // related: null,
                    classSelection: 1,
                    notDeducted: 1,
                    deduction: 1


                },
                teachers: [],
                grades: [],
                courses: [],
                rooms: [],
                url: '/pc/classes'
            },
            created: function () {
                axios.get('/pc/room/all/' + this.item.schoolId).then(function (res) {
                    this.rooms = res.data;
                }.bind(this));
                axios.get('/pc/teacher/all/' + this.item.schoolId).then(function (res) {
                    this.teachers = res.data;
                }.bind(this));

                axios.get('/pc/grade/all').then(function (res) {
                    this.grades = res.data;
                }.bind(this));

                axios.get('/pc/course/all/' + agentId).then(function (res) {
                    this.courses = res.data;
                }.bind(this));

                this.init();
            },
            watch: {
                "item.notDeducted"(e) {
                    if (e) {
                        this.item.notDeducted = 1
                    } else {
                        this.item.notDeducted = 0
                    }
                },
                "item.classSelection"(e) {
                    if (e) {
                        this.item.classSelection = 1
                    } else {
                        this.item.classSelection = 0
                    }
                }
            }

        }));

    </script>

</body>

</html>